<template>
<div class="app-container">
  <div class="form-box">
    <el-form ref="form" :model="record" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="患者姓名" prop="username">
            <el-input :disabled="true" v-model="record.username" placeholder="请输入患者姓名" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号码" prop="phone">
            <el-input :disabled="true" v-model="record.phone" placeholder="请输入手机号码" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄" prop="age">
            <el-input :disabled="true" v-model="record.age" placeholder="请输入年龄" maxlength="11" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户性别">
            <el-select :disabled="true" v-model="record.gender" placeholder="请选择性别">
              <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">-->
<!--          <el-form-item v-if="record.userId == undefined" label="用户密码" prop="password">-->
<!--            <el-input v-model="record.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="身份证">
            <el-input :disabled="true" v-model="record.identityCard"  placeholder="请输入身份证号码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="地址">
            <el-input :disabled="true" v-model="record.address" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="主要病症诉求">
            <el-input :disabled="true" v-model="record.appeal" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="个人病史描述">
            <el-input :disabled="true" v-model="record.message" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="现病史描述">
            <el-input :disabled="true" v-model="record.message2" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="既往病逝">
            <el-input :disabled="true" v-model="record.medicalHistoryDesc" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="file-box">
        <div v-for="(item,index) in record.resourceList"  :key="index">
          <image-preview :src="item.imgPath" class="img"/>
        </div>
      </div>
      <el-row>
        <el-col :span="24">
          <el-form-item label="审核结果" prop="recordState">
            <el-radio-group v-model="record.recordState">
              <el-radio
                v-for="dict in dict.type.wx_record_state"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="审核意见">
            <el-input v-model="record.auditRemark" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="dialog-footer">
    <el-button type="primary" @click="submitForm">提 交</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</div>
</template>

<script>
    import { updateRecord, auditRecordInfo, processRecordInfo, getRecordByUserIdAndState } from "@/api/wechat/record";
    import { listUser, getUser, delUser, addUser, updateUser } from "@/api/wechat/user";
    import { changeUserState } from "@/api/wechat/user";
    export default {
        name: "approval",
        dicts: ['wx_record_state','sys_user_sex'],
        data() {
            return{
                title: 'Medical Record',
                userId: undefined,
                record:{
                    username: undefined,
                    gender: undefined,
                    age: undefined,
                    address: undefined,
                    phone: undefined,
                    identityCard: undefined,
                    state: undefined,
                    appeal: undefined,
                    message: undefined,
                    message2: undefined,
                    medicalHistoryDesc: undefined,
                    resourceList: [],
                    recordState: undefined,
                },
                auditParam:{
                    auditRemark: undefined,
                    state: undefined,
                    recordId: undefined
                },
                // 表单校验
                rules: {
                },
                queryParams:{
                    userId: undefined,
                    state: 0,
                }
            }
        },
        created() {
            const userId = this.$route.params && this.$route.params.userId;
            if (userId !== undefined && userId != 0) {
                this.userId = userId
                this.queryParams.userId = userId
                this.getUser()
                this.getRecordByUserIdAndState()
            }
        },
        methods: {
            /** 查询患者基本信息 */
            getUser(){
                getUser(this.userId).then(response => {
                    this.record.username = response.data.username;
                    this.record.gender = response.data.gender;
                    this.record.age = response.data.age;
                    this.record.address = response.data.address;
                    this.record.phone = response.data.phone;
                    this.record.identityCard = response.data.identityCard;
                    this.record.state = response.data.state
                })
            },
            /** 查询患者列表 */
            getRecordByUserIdAndState() {
                getRecordByUserIdAndState(this.queryParams).then(response => {
                    this.record.recordId = response.data.recordId
                    this.record.appeal = response.data.appeal
                    this.record.message = response.data.message
                    this.record.message2 = response.data.message2
                    this.record.medicalHistoryDesc = response.data.medicalHistoryDesc
                    this.record.resourceList = response.data.resourceList
                    this.record.recordState = response.data.state
                    this.auditRemark = response.data.auditRemark
                    this.record.userId = response.data.userId
                });
            },

            /** 取消按钮 */
            cancel() {
                this.$router.push("/wxchat/user/audit/" + '0000');
            },


            /** 提交按钮 */
            submitForm: function() {
                if (this.record.recordId != undefined) {
                    this.auditParam.recordId = this.record.recordId
                    this.auditParam.state = this.record.recordState
                    this.auditParam.auditRemark = this.record.auditRemark
                    auditRecordInfo(this.auditParam).then(response => {
                        this.$modal.msgSuccess("提交成功");
                        //this.updateUserState(this.record.userId,this.record.recordState)
                        this.$router.push("/wxchat/user/audit/" + '0000');
                    });
                }
            },
            /** 更新用户状态**/
            updateUserState: function(userId,recordState){
                console.log(recordState)
                var state = recordState
                if(state != undefined){
                    changeUserState(userId,state).then(response =>{

                    })
                }
            }

        }
    }
</script>

<style lang="scss" scoped>

    .file-box{
      padding: 10px 20px;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: left;

    }
    .file-box .img{
      width: 200px;
      height: 300px;
      border-radius: 5px;
      margin: 15px;
    }
    .dialog-footer{
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: right;
      background-color: transparent;
    }
</style>
